<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="minimal-ui,width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>售后服务-{$webseting.web_title}</title>
    <script src="__PUBLIC__/wap/js/flexible.js"></script>
    <link href="__PUBLIC__/wap/css/icons.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/wap/css/base.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/wap/css/order.css" />

    <link href="__PUBLIC__/wap/css/service.css"  rel="stylesheet">
</head>
<style type="text/css">
    .img-item:before{background-image: none;}
</style>
<body id="u-body">
<header id="header" class="u-header clearfix">
    <div class="u-hd-left f-left">
        <a href="{:U('wap/goodsorder/order_detail',array('id'=>$refund['order_id']))}" class="J_backToPrev"><span class="u-icon-px i-hd-back"></span></a>
    </div>
    <div class="u-hd-tit"><span>售后服务</span></div>
</header>

<div class="fm-wrap">
    <div class="cartlist">
        <ul>
            <li  class="goods">
                <div class="goodsimg imgnobg">
                    <div class="img bgcover " style=" background:url({:U('wap/index/get_thumbs',array('auto'=>64))}?img={$data.goods_image})">
                    </div>
                </div>
                <div class="info">
                    <div class="title">
                        {$data.goods_name}
                    </div>
                    <div class="pay">
                        <div class="pirce num green">
                            ￥{$data.goods_price}
                        </div>
                        <div class="qty">
                            <span class="num">{$data.goods_number}</span>件
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                </div>
            </li>
        </ul>
    </div>
        <section class="miblewrap01 goods-apply-service">
            <h3 class="mible-tit">联系人:{$refund['refund_name']}</h3>
            <h3 class="mible-tit">联系电话:{$refund['refund_tel']}</h3>
        </section>
        <section class="miblewrap01 goods-apply-service">
            <h3 class="mible-tit">状态：{$refund['code_name']}</h3>
        </section>
        <section class="miblewrap01 goods-apply-report">

            <if condition="!empty($refund['refund_money']) && $refund['code'] eq 5">
                <h3 class="mible-tit">退款金额：￥{$refund['refund_money']}</h3>
            </if>
            <h3 class="mible-tit">问题描述</h3>
            <div class="fm-form">
                {$refund['refund_remark']}
            </div>
        </section>

    <form id="form2" action=""  novalidate="novalidate" method="post" onSubmit="return false;">
        <section class="miblewrap01 goods-apply-report">
            <h3 class="mible-tit">继续申请售后</h3>
            <div class="fm-form">
                <textarea id="refund_remark" name="refund_remark" cols="" rows="" placeholder="请您在此描述详细问题" class="fm-area"></textarea>
            </div>
        </section>
        <section class="miblewrap01">
            <h3 class="mible-tit">上传图片</h3>
            <div  class="img-wrapper upload_file">

                <div class="upload-btn-box" style="display: inline-block">
                    <input id="up_img_url" type="file" name="questionPic"  class="upload-btn upload_input">
                </div>
                <iframe name="uploadIfrm" style="display: none"></iframe>
            </div>
            <div style="clear:both "></div>
            <div class="msg-text">最多上传3张，每张不超过5M，支持JPG、BMP、PNG</div>
        </section>

        <input type="hidden" class="fm-text al"  name="ref_id"   placeholder="" value="{$refund.ref_id}">
        <input type="hidden" class="fm-text al"  name="chat_id"   placeholder="" value="{$last_chat}">
    </form>

    <div class="fm-btns"><a href="javascript:void(0);" class="btn-h3 btn-c3 phone_reg_btn">提交</a></div>


    <section class="miblewrap01 goods-apply-report">
        <h1>对话</h1>
        <volist name="list" id='vo' key='key'>

            <h3 class="mible-tit">
                <if condition="$vo.type eq 1">
                    我:
                    <else/>
                    商家:
                </if>
            </h3>
            <div class="fm-form">
                {$vo['content']}
            </div>
            <if condition="!empty($vo['chat_img'])">
                <div  class="img-wrapper ">
                <volist name="vo['chat_img']" id="v" key="k">
                    <a href="{$v}">
                        <div class="img-item fileinput " style="background-image:none;">
                            <span><img   src="{$v}"></span>
                        </div>
                    </a>
                </volist>
                </div>
                <div style="clear:both "></div>
            </if>

        </volist>
    </section>


</div>

<include file="Public/wap_javascript" />
<!--微信分享-->
<include file="Public/share_weixin" />
<script src="__PUBLIC__/js/jquery.form.js"></script>
<script src="__PUBLIC__/bootstrap/vendor/jquery-validation/jquery.validate.wap.js"></script>
<script src="__PUBLIC__/bootstrap/vendor/ajaxfileupload/ajaxfileupload.js"></script>

<script>
    jQuery(document).ready(function() {

        $("#form2").validate({
            rules: {
                refund_remark:'required'

            },
            messages: {
                refund_remark:'<span class="icon-warning icon_warning"></span>&nbsp;请输入描述'
            },
            focusInvalid:false,
            success: function(label) {
                // set  as text for IE 
                // alert('ok'); 
                //label.html(" ").addClass("checked"); 
            },
            /*执行ajaxsubmit  */
            submitHandler: function(editform) {

                var options = {
                    url :  "<?php echo U('Wap/goodsrefund/refund_chat'); ?>",
                    type : "post" ,
                    dataType:'json',
                    target : "#loader",
                    error: function(){layer.msg("服务器没有返回数据，可能服务器忙，请重试",{icon:5});},
                    onwait : "正在处理信息，请稍候...",
                    success: function(response){
                         console.log(response);
                        //$("#loader").fadeIn(500).html(response.data).fadeOut(500); 
                        //$('#editform').hide(2000); 
                        if(response.status==1){
                            //alert("注册成功");
                            layer.msg('提交成功', {icon: 6},function(){
                                //关闭后的操作
                                window.location.href="<?php echo U('Wap/goodsrefund/index',array('id'=>$data['rec_id'])); ?>";
                            });
                        }else{
                            layer.msg(response.error, {icon: 5});
                            // alert(response.error);
                        }
                    }
                };
                setTimeout((function(opt){
                    return function(){
                        $('#form2').ajaxSubmit(opt);
                    }
                })(options), 300);
                return false;
            }

        });

        $('.phone_reg_btn').click(function(){
            $('#form2').submit();
        });


    });




    $(document).ready(function (e) {
        ///上传商家logo
        $('.upload_file').on('change','.upload_input', function () {
            var goods_length=$(".refund_img").length;
            if(goods_length>=4){
                layer.msg('图片最多上传4张', {icon: 5});
            }else{
                ajaxFileUploadMore('url',"{:U('admin/Imagecat/upload_ajax')}");
            }
        });

        $('.upload_file').on('click','.delete_img', function () {
            var __thiss=$(this);
            layer.confirm('确定删除该图片？', {
                btn: ['确定','取消'] //按钮
            },function(){
                __thiss.remove();
                var goods_length=$(".refund_img").length;
                if(goods_length < 4){
                    $('.upload-btn-box').show();
                }
                layer.msg('已删除', {icon: 6,time:1000});
            }, function(){

            });
        });


    });


    function show_head(head_file) {

        //插入数据库
        $("#head_photo_src").attr('src', head_file);
        var img = head_file.split('/');
        //  var file = '/' + img[3] + '/' + img[4] + '/' + img[5] + '/' + img[6];
        $("#photo_pic").val(head_file);
        //});

    }

    //多文件上传带预览
    function ajaxFileUploadMore(imgid,  url) {

        $.ajaxFileUpload({
            url: url,
            secureuri: false,
            fileElementId: "up_img_"+imgid,
            dataType: 'json',
            data: {name: 'logan', id: 'id'},
            success: function (data, status)
            {

                if (typeof (data.error) != 'undefined')
                {

                    if (data.error != '')
                    {
                        layer.msg(data.error, {icon: 5});
                    } else {

                        var resp = data.msg;
                        if (resp != '0000') {
                            layer.msg(data.error, {icon: 5});
                            return false;
                        } else {
                            var str_img=' <div class="img-item fileinput delete_img"><span><img   src="'+data.imgurl
                                    +'"><input type="hidden" name="refund_img[]"  class="refund_img"  value="'
                                    +data.imgurl+'"></span></div>';
                            $('.upload_file').prepend(str_img);
                            var goods_length=$(".refund_img").length;
                            if(goods_length >= 4) {
                                $('.upload-btn-box').hide();
                            }
                        }

                    }
                }
            },
            error: function (data, status, e)
            {
                layer.msg('上传错误', {icon: 5});
            }
        });

        return false;
    }

</script>
</body>
</html>